<template>
  <el-dialog :visible.sync="visible"
             :title="$t('custom.dataset.linkedbotbtn')"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :destroy-on-close="true"
             :before-close="resetForm"
             width="990px">
          <el-checkbox v-if="$hasPermission('sys:dataset:linkedbot')" v-model="checked" @change="getInfo" style="margin-bottom: 10px;">Show All Tenant</el-checkbox>
          <ejs-grid
                        :dataSource="comDataList"
                        :allowResizing="gridSettings.allowResizing"
                        :allowFiltering="gridSettings.allowFiltering"
                        :filterSettings="gridSettings.filterSettings"
                        :allowGrouping="gridSettings.allowGrouping"
                        :allowPaging="gridSettings.allowPaging"
                        :toolbar="gridSettings.toolbar"
                        :allowTextWrap="gridSettings.allowTextWrap"
                        :showColumnChooser="gridSettings.showColumnChooser"
                        :allowReordering="gridSettings.allowReordering"
                        :allowSorting="gridSettings.allowSorting"
                        :pageSettings="gridSettings.pageSettings"
                        :showColumnMenu='gridSettings.showColumnMenu'
                        ref="grid"
                        height="50vh"
                        v-loading='loading'
                        :commandClick="commandClick"
                        :sortSettings="gridSettings.sortSettings"
                    >
                <e-columns>
                  <e-column field="name"
                            :headerText="$t('custom.dataset.name')"
                            :width="100"></e-column>
                  <e-column field="description"
                            :headerText="$t('custom.accounting.description')"
                            :width="130"></e-column>
                  <e-column field="enable"
                            :headerText="$t('custom.bots.trigger')"
                            :width="100"></e-column>
                  <e-column field="alert"
                            :headerText="$t('custom.bots.alert')"
                            :width="100"></e-column>
                  <e-column field="updateTime"
                        :headerText="$t('custom.reports.updateDate')"
                        :width="100"
                        :template="UpdateTimeFormat"></e-column>
                  <e-column field="tenantCode"
                            headerText="Client Code"
                            v-if="checked"
                            :width="100"></e-column>
                  <e-column :width="120"
                            :template="Btn"></e-column>
                </e-columns>
              </ejs-grid>
    <template slot="footer">
      <el-button @click="resetForm"
                 size="small">{{ $t('cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import UpdateTimeFormat from '@/components/grid-format/UpdateTimeFormat.vue'
import { deleteBotInfoApi } from '@/api/new'

export default {
  name: 'LinkedBot',
  data () {
    return {
      visible: false,
      loading: false,
      dataForm: {
        dataSourceId: null,
        gadgetId: null
      },
      checked: false,
      linkedData: [],
      gridSettings: {
        showColumnMenu: true,
        allowResizing: true,
        allowFiltering: true,
        filterSettings: { type: 'Excel' },
        allowGrouping: true,
        allowPaging: true,
        allowExcelExport: true,
        allowPdfExport: true,
        toolbar: ['Search', 'ColumnChooser'],
        showColumnChooser: true,
        groupOptions: { columns: ['name'] },
        allowReordering: true,
        allowSorting: true,
        allowTextWrap: true,
        height: window.innerHeight - 230,
        pageSettings: { pageSize: 50, pageSizes: [10, 50, 100, 200, 1000], pageCount: 4 },
        groupSettings: {
          allowReordering: false,
          columns: [],
          disablePageWiseAggregates: false,
          enableLazyLoading: false,
          showDropArea: true,
          showGroupedColumn: false,
          showToggleButton: false
        },
        sortSettings: {
          columns: [
            { field: 'name', direction: 'Ascending' }
          ]
        }
      },
      UpdateTimeFormat: function () {
        return { template: UpdateTimeFormat }
      },
      Btn: function () {
        return { template: Btn }
      }
    }
  },

  components: {
    UpdateTimeFormat
  },
  computed: {
    dataRule () {
      return {}
    },
    comDataList () {
      var _self = this
      var retdata = _self.linkedData
      return retdata
    }
  },
  watch: {
    visible (val) {
      if (!val) {
      }
    }
  },
  created () {
    Vue['_this_linked_bot'] = this
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.dataSourceId || this.dataForm.gadgetId) {
          this.getInfo()
        }
      })
    },
    getInfo () {
      this.loading = true
      const params = {}
      if (this.dataForm.dataSourceId) {
        params.dataSourceId = this.dataForm.dataSourceId
      }
      if (this.dataForm.gadgetId) {
        params.dataSourceId = this.dataForm.gadgetId
      }
      if (this.checked) {
        params.showAllTenant = true
      }
      this.$interface.bots.getBotByDatasetListApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.linkedData = res.data
        this.loading = false
      })
    },
    verifyForm () {
      return this.$refs['dataForm'].validate()
    },
    commandClick (type, data) {
      if (type === 'View') {
        this.$store.commit('RECORDBOTID', data.id)
        // this.$router.push({ name: 'mspbots-bots-bak-bot-view-index', query: { botId: data.id } })
        // this.$router.push({ name: 'mspbots-bots-bak-bot-design-index', query: { botId: data.id } })
        this.$router.push({ path: `bot-${data.id}`, query: { pageid: 'botdetail', botId: data.id, name: data.name } })
        this.visible = false
      }
      if (type === 'Delete') {
        this.deleteLinkBot(data.id)
      }
    },
    deleteLinkBot (id) {
      this.loading = true
      const params = {
        id: id
      }
      deleteBotInfoApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.getInfo()
        this.$message.success(res.msg)
        this.loading = false
      })
    },
    resetForm () {
      this.visible = false
      this.dataForm = {
        dataSourceId: null,
        gadgetId: null
      }
      this.checked = false
      this.linkedData = []
    }
  },
  destroyed () {
    delete Vue['_this_linked_bot']
  }
}
const Btn = Vue.component(
  'btn', {
    template: `<div style="display: flex;justify-content: flex-end;">
      <el-button size="mini" plain type="primary" @click="clickSelect('View',$data.data)">View</el-button>
      <el-button size="mini" plain type="danger"  @click="clickSelect('Delete',$data.data)" v-if="$hasPermission('sys:bots:delete')">Delete</el-button>   
    </div>`,
    data () {
      return {}
    },
    methods: {
      clickSelect (e, row) {
        Vue._this_linked_bot.commandClick(e, row)
      }
    }
  }
)
</script>

<style lang="scss">
.mod-sys__user {
  .role-list {
    .el-select {
      width: 100%;
    }
  }
}
</style>
